import { IAxisData, IPieChartData, IRadarChartIndicator } from '@/types'
import { formatAmount } from '@/utils/numberUtil.ts'

/**
 * 工具栏
 */
export const lineChartToolbox = {
  show: true,
  feature: {
    mark: {
      show: true
    },
    magicType: {
      show: true,
      type: ['line', 'bar'],
      title: {
        line: '切换为折线图',
        bar: '切换为柱状图'
      }
    },
    saveAsImage: {
      show: true,
      title: '保存到图片'
    }
  }
}

/**
 * 标题
 * @param text 文本
 */
export const commonTitle = (text: string) => {
  return {
    text,
    left: 'left',
    top: '1%',
    padding: 10
  }
}

/**
 * 图表网格位置
 */
export const commonGrid = {
  top: '12%',
  left: '5%',
  right: '10%',
  bottom: '5%',
  containLabel: true
}

/**
 * 图表标记点
 */
export const commonMarkPoint = {
  data: [
    { type: 'max', name: 'Max' },
    { type: 'min', name: 'Min' }
  ],
  label: {
    formatter: (params: any) => {
      return formatAmount(params.value)
    }
  },
  symbolSize: 65
}

/**
 * 图表标记线
 */
export const commonMarkLine = {
  data: [
    { type: 'average', name: 'Avg' }
  ],
  precision: 1
}

/**
 * 暂无数据
 * @param length 数据长度
 */
export const emptyGraphic = (length: number) => {
  return {
    type: 'text',
    left: 'center',
    top: 'middle',
    silent: true,
    invisible: length > 0,
    style: {
      fill: '#9d9d9d',
      fontSize: 25,
      fontWeight: 'bold',
      text: '暂无数据'
    }
  }
}

/**
 * 折线图配置
 * @param xAxisName x轴名称
 * @param xAxisData x轴数据
 * @param yAxisName y轴名称
 * @param yAxisData Y轴数据
 */
export const lineChartOptions = (xAxisName: string, xAxisData: IAxisData,
  yAxisName: string, yAxisData: IAxisData) => {
  return {
    tooltip: {
      trigger: 'axis'
    },
    grid: commonGrid,
    calculable: true,
    xAxis: {
      type: 'category',
      name: xAxisName,
      nameTextStyle: {
        padding: [0, 0, 0, -10]
      },
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      name: yAxisName
    },
    graphic: emptyGraphic(xAxisData.length),
    series: [
      {
        name: xAxisName,
        type: 'line',
        data: yAxisData,
        label: {
          show: true,
          position: 'top',
          formatter: (params: any) => {
            return `${formatAmount(params.value)}`
          }
        }
      }
    ]
  }
}

/**
 * 柱状图配置
 * @param xAxisName x轴名称
 * @param xAxisData x轴数据
 * @param yAxisName y轴名称
 * @param yAxisData Y轴数据
 */
export const barChartOptions = (xAxisName: string, xAxisData: IAxisData,
  yAxisName: string, yAxisData: IAxisData) => {
  return {
    tooltip: {
      trigger: 'axis'
    },
    grid: commonGrid,
    calculable: true,
    xAxis: {
      type: 'category',
      name: xAxisName,
      nameTextStyle: {
        padding: [0, 0, 0, -10]
      },
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      name: yAxisName
    },
    graphic: emptyGraphic(xAxisData.length),
    series: [
      {
        name: xAxisName,
        type: 'bar',
        barWidth: '20%',
        data: yAxisData,
        label: {
          show: true,
          position: 'top',
          formatter: (params: any) => {
            return `${formatAmount(params.value)}`
          }
        }
      }
    ]
  }
}

/**
 * 饼图配置
 * @param name 名称
 * @param unit 单位
 * @param data 数据
 */
export const pieChartOptions = (name: string, unit: string, data: IPieChartData[]) => {
  return {
    series: [
      {
        name,
        type: 'pie',
        radius: ['20%', '60%'],
        center: ['50%', '50%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          alignTo: 'edge',
          formatter: (params: any) => {
            return `${params.name}: ${formatAmount(params.value)}${unit} \n (${params.percent}%)`
          },
          minMargin: 5,
          edgeDistance: '5%',
          lineHeight: 20
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
          lineStyle: {
            width: 3
          }
        },
        emphasis: {
          label: {
            show: true,
            fontWeight: 'bold'
          }
        },
        data
      }
    ]
  }
}

/**
 * 雷达图配置
 * @param name 名称
 * @param indicator 指示器
 * @param dataList 数据
 */
export const radarChartOptions = (name: string,
  indicator: IRadarChartIndicator[], dataList: number[]) => {
  return {
    radar: {
      // shape: 'circle',
      indicator,
      center: ['50%', '55%']
    },
    series: [
      {
        name,
        type: 'radar',
        label: {
          show: true
        },
        data: [
          {
            value: dataList,
            name
          }
        ]
      }
    ]
  }
}
